<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<%@ page language="java" pageEncoding="UTF-8"%>
		<%@ page contentType="text/html;charset=UTF-8"%>
			<%@ taglib prefix="s" uri="/struts-tags" %>
				<%@ taglib prefix="sec"
				uri="http://www.springframework.org/security/tags"%>
					<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

					<title>枝江市农村供水工程信息化平台</title>
					<!-- BOOTSTRAP CORE STYLE  -->
					<link href="../assets/css/bootstrap.css" rel="stylesheet" />
					<!-- FONT AWESOME ICONS  -->
					<link href="../assets/css/font-awesome.css" rel="stylesheet" />
					<!-- CUSTOM STYLE  -->
					<link href="../assets/css/style.css" rel="stylesheet" />
					<link href="../css/time/css//bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

					<!-- 树形菜单样式 -->
					<link rel="stylesheet" href="../css/accordionMenu/style.css" type="text/css" />
					<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
					<link href="../css/bootstraptable/bootstrap-table.css" rel="stylesheet" />
					<link href="../css/bootstraptable/bootstrap-editable.css" rel="stylesheet" />
					<link rel="stylesheet" href="../css/systemManage/btn.css">
					<link rel="stylesheet" href="../css/fishbone/fishBone.css">
					<link rel="stylesheet" href="../css/flipclock/flipclock.css">
					<!--<link rel="stylesheet" href="../css/displayTime/style.css">-->
					<!-- js  -->
					<!-- CONTENT-WRAPPER SECTION END-->
					<!-- FOOTER SECTION END-->
					<!-- JAVASCRIPT AT THE BOTTOM TO REDUCE THE LOADING TIME  -->
					<!-- CORE JQUERY SCRIPTS -->
					<script src="../assets/js/jquery-1.11.1.js"></script>
					<!-- BOOTSTRAP SCRIPTS  -->
					<script src="../assets/js/bootstrap.js"></script>
					<script type="text/javascript" src="../js/bootstraptable/bootstrap-table.js"></script>
					<script type="text/javascript" src="../js/bootstrapeditable/bootstrap-editable.js"></script>
					<script type="text/javascript" src="../js/bootstrapeditable/bootstrap-table-editable.js"></script>
					<script src="../js/pipeline/pipeline.js"></script>
					<script src="../js/systemManage/init.js"></script>
					<script src="../js/accordionMenu/index.js"></script>
					<script src="../js/bootstrap-table-zh-CN.min.js"></script>

					<script src="../js/disposeAlert/queryAlert.js"></script>
					<script src="../js/disposeAlert/addAlert.js"></script>
					<script src="../js/index.js"></script>

					<script src="../disposeAlert/js/markdown/ace.js"></script>
					<script src="../disposeAlert/js/markdown/marked.min.js"></script>

					<script src="../js/fishbone/fishBone.js"></script>
					<!--<script src="../js/flipclock/flipclock.js"></script>-->
					<!--<script src="../js/displayTime/script.js"></script>-->
					<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>-->
					<script src="../js/fishbone/jquery.SuperSlide.2.1.1.js"></script>

					<script src="../disposeAlert/js/markdown/bootstrap-markdown-editor.js"></script>
					<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
					<script type="text/javascript" src="../css/time/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
					<script type="text/javascript" src="../css/time/js/bootstrap-clockpicker.min.js"></script>



					<script src="../js/initWebSocket/initWebSocket.js"></script>

					<script>
						jQuery(document).ready(function ($) {
							initWebSocket();

							$("#comment").each(function () {
									$(this).css("height", $(this).attr("scrollHeight"));
								})
								/*var clock; clock = $('.clock').FlipClock({ clockFace: 'TwelveHourClock' });*/
						})
					</script>

					<!-- 时间相关JS -->


</head>

<body>

	<div class="navbar navbar-inverse set-radius-zero">
		<div class="container">
			<div class="navbar-header">
			</div>

			<div class="left-div">
				<!--<div class="clock" style="position: absolute; top: 10px;  left: 65%;"></div>-->
				<!--<iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=5&py=zhijiang&num=2"></iframe>-->
				<iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7&icon=5&py=zhijiang" style="position: absolute; top: 10px;  left: 80%; " width="225" height="90" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

				<div class="user-settings-wrapper">
					<ul class="nav">

						<li class="dropdown">


							<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
								<span class="glyphicon glyphicon-user" style="font-size: 25px;"></span>
							</a>

							<div class="dropdown-menu dropdown-settings">
								<div class="media">
									<a class="media-left" href="#">
										<img src="../assets/img/64-64.jpg" alt="" class="img-rounded" />
									</a>



									<div class="media-body">
										<h4 class="media-heading"><sec:authentication property="principal.username" /> </h4>
										<h5>用户</h5>

									</div>
								</div>
								<hr />

								<h5><strong>权限: </strong><sec:authentication property="principal.permission" /></h5>

								<hr />
								<a href="../User/UserInfoAction" class="btn btn-info btn-sm">用户信息</a>&nbsp;
								<a href="${pageContext.request.contextPath}/logout" class="btn btn-danger btn-sm">登出</a>

							</div>
						</li>


					</ul>
				</div>
				<div id="time" style="padding-left: 95%;"> </div>
			</div>
		</div>
	</div>
	<!-- LOGO HEADER END-->
	<section class="menu-section">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="navbar-collapse collapse ">
						<ul id="menu-top" class="nav navbar-nav navbar-right">
							<li><a href="../WaterWorksInit">供水管网</a></li>
							<li><a href="../MonitorData/GetAllWaterPlant.action">供水监测</a></li>
							<li><a href="#">工艺过程</a></li>
							<li><a href="../waterQuality/qualityIndex.jsp">水质监测</a></li>
							<li><a href="#">厂区漫游</a></li>
							<li><a class="menu-top-active" href="#">预警处置</a></li>
							<li><a href="../SafetyMonitor/SafetyMonitorInit">安全监视</a></li>
							<li><a href="../User/UserInfoAction">系统管理</a></li>

						</ul>
					</div>
				</div>

			</div>
		</div>
	</section>
	<!-- MENU SECTION END-->
	<div class="content-wrapper">
		<div class="container">

			<div class="row" id="content">
				<div class="col-md-2" id="leftContent">
					<ul id="accordion" class="accordion">
						<li>
							<div class="link">
								<img src="../img/修改.png">
								<a href="../Alert/QueryAlert" class="waterPlantsLink">
												查看预警记录</a>
							</div>
						</li>
						<li>
							<div class="link">
								<img src="../img/新增.png">
								<a href="../Alert/AddAlert" class="waterPlantsLink">
												增加预警处置</a>
							</div>
						</li>
						<li>
							<div class="link">
								<a href="#" class="waterPlantsLink">
									<img src="../img/修改.png"> 修改预警处置
									<i class="fa fa-chevron-down"></i>
								</a>
							</div>
							<ul class="submenu">
								<s:iterator value="alerts" id="alert">
									<li>
										<a href="http://localhost:8080/Waterworks/Alert/LinkToAlert.action?alertType=<s:property value=" #alert.alertType "/>" class="alertType">
											<s:property value="#alert.alertType" />
										</a>
										<div class="alertAlertContent" id='<s:property value="#alert.alertType" />' style="display: none;">
											<s:property value="#alert.alertContent" />
										</div>
										<div class="alertAlertId" id='<s:property value="#alert.alertType" />' style="display: none;">
											<s:property value="#alert.alertId" />
										</div>

									</li>
								</s:iterator>
							</ul>
						</li>


				</div>
				<div class="col-md-10" id="rightContent">

					<ol class="breadcrumb page-head-line ">
						<li><a href="../index.jsp"><i class="fa fa-dashboard"></i>
												首页 </a></li>
						<li class="active">查看预警处置</li>



					</ol>
					<div style=" padding: 20px;">
						<table>
							<tr>
								<td style="padding-left:20px">查询时间选择：</td>
								<% java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyy/MM/dd"); 
								java.util.Date currentTimeDam = new java.util.Date();//得到当前系统时间
								String str_dateDam = formatter.format(currentTimeDam); //将日期时间格式化 
								
								%>
									<td style="padding-top:15px">
										<div class="form-group">
											<div class="input-group date form_date dateChoose" id="timeTableCanal" style="width:200px" data-date="" data-date-format="yyyy/mm/dd" data-link-field="beiginTimeOfWaterLevel" data-link-format="yyyy/mm/dd">
												<input class="form-control" size="10" type="text" readonly>
												<span class="input-group-addon">
													<span class="glyphicon glyphicon-remove"></span>
												</span>
												<span class="input-group-addon">
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>

											<input type="hidden" id="beiginTimeOfWaterLevel" value="" />

										</div>
									</td>
									<td>~</td>
									<td style="padding-top:15px">
										<div class="form-group">

											<div class="input-group date form_date dateChoose" id="timeTable" style="width:200px" data-date="" data-date-format="yyyy/mm/dd" data-link-field="endTimeOfWaterLevel" data-link-format="yyyy/mm/dd">
												<input class="form-control" size="10" type="text" value="<%=str_dateDam %>" readonly>
												<span class="input-group-addon">
													<span class="glyphicon glyphicon-remove"></span>
												</span>
												<span class="input-group-addon">
													<span class="glyphicon glyphicon-calendar"></span>
												</span>
											</div>
											<input type="hidden" id="endTimeOfWaterLevel" value="<%=str_dateDam %>" />
										</div>
									</td>

									<td style="padding-left:20px">选择预警信息类型：</td>
									<td>
										<select id="alertSelect">
											<option value="0" selected="selected">全部预警信息</option>
											<option value="1">已处理预警信息</option>
											<option value="2">未处理预警信息</option>
										</select>
									</td>
									<td>
										<button id="queryButton" class="btn btn-default" style="margin-left:20px;">查询</button>
									</td>
							</tr>

						</table>
						<div>
							<table data-toggle="table" style="white-space: nowrap; text-align:center" class="table table-hover table-striped table-bordered table-condensed" id="alertRecord" data-cache="false" data-search="true" data-select-item-name="toolbar1" data-url='http://localhost:8080/Waterworks/Alert/QueryAlertRecord' data-pagination="true" data-page-list="[5,10,20,全部]" data-show-export="true" data-show-refresh="true">
								<thead>
									<tr>
										<th data-field="alertType" data-sortable="true" data-align="center">预警类型</th>
										<th data-field="time" data-sortable="true" data-align="center">预警时间</th>
										<th data-field="alertWaterPlant" data-sortable="true" data-align="center">预警地点</th>
										<th data-field="uppervalue" data-align="center">最大值</th>
										<th data-field="lowervalue" data-align="center">最小值</th>
										<th data-field="value" data-align="center">数据</th>
										<th data-field="disposealertname" data-align="center">处理人</th>
										<th data-field="username" data-align="center">用户名</th>
										<th data-formatter="flagMenu" data-align="center">是否处理</th>
										<th data-formatter="optionButton" data-events="operateEvents" data-align="center">操作</th>
									</tr>
								</thead>

							</table>
							<!-- /.table-->
						</div>
						<div>
							<div class="fishBone" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- /.modal -->
</body>

</html>